react-resize-detector

What is react-resize-detector?

The react-resize-detector is a React component designed to handle resize events for React elements. It provides a simple and efficient way to trigger a function or render logic when the size of an element changes. This is particularly useful in responsive designs and when elements need to adjust based on their container's dimensions.

What are react-resize-detector's main functionalities?

Basic resize detection

This feature allows you to detect the size of a component and react to changes. The `useResizeDetector` hook provides `width`, `height`, and `ref` which you attach to the component you want to monitor. The component re-renders whenever the size changes, displaying the new dimensions.

import React from 'react';
import useResizeDetector from 'react-resize-detector';

const ResponsiveComponent = () => {
  const { width, height, ref } = useResizeDetector();
  return (
    <div ref={ref}>
      Size: {width} x {height}
    </div>
  );
};

export default ResponsiveComponent;

OnResize callback

This feature uses the `withResizeDetector` higher-order component to monitor size changes. It provides `width`, `height`, and an `onResize` callback that is triggered on every resize event. This is useful for performing actions or calculations based on the new size.

import React from 'react';
import { withResizeDetector } from 'react-resize-detector';

class MyComponent extends React.Component {
  render() {
    const { width, height, onResize } = this.props;
    return (
      <div onResize={onResize}>
        Current size: {width} x {height}
      </div>
    );
  }
}

export default withResizeDetector(MyComponent, {
  handleWidth: true,
  handleHeight: true,
  onResize: (width, height) => console.log(`Resized to ${width} x ${height}`)
});

Other packages similar to react-resize-detector

react-sizeme

react-sizeme is another package that provides similar functionality to react-resize-detector. It allows components to respond to changes in size. However, react-sizeme uses a higher-order component approach primarily, which might be less convenient than hooks provided by react-resize-detector in functional components.

resize-observer-polyfill

This package is a polyfill for the ResizeObserver API, which is used to report changes to the dimensions of an Element's content or border box. It's more of a low-level API compared to react-resize-detector, which provides React-specific abstractions and hooks for easier integration in React applications.

README

Handle element resizes like it's 2019!

Nowadays browsers have started to support element resize handling natively using ResizeObservers. We use this feature (with a polyfill) to help you handle element resizes in React.

Demo

Live demo

Local demo:

git clone https://github.com/maslianok/react-resize-detector.git
cd react-resize-detector/examples
npm i && npm start

Installation

npm i react-resize-detector
// OR
yarn add react-resize-detector

Examples

1. Callback Pattern

import React, { PureComponent } from 'react';
import { render } from 'react-dom';
import ReactResizeDetector from 'react-resize-detector';

class App extends PureComponent {
  render() {
    return (
      <div>
        ...
        <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
      </div>
    );
  }

  onResize = () => {
    ...
  }
}

render(<App />, document.getElementById('root'));

2. Child Function Pattern

<ReactResizeDetector handleWidth handleHeight>
  {(width, height) => <div>{`${width}x${height}`}</div>}
</ReactResizeDetector>

3. Child Component Pattern

const CustomComponent = ({ width, height }) => <div>{`${width}x${height}`}</div>;

// ...

<ReactResizeDetector handleWidth handleHeight>
  <CustomComponent />
</ReactResizeDetector>;

4. HOC pattern

import { withResizeDetector } from 'react-resize-detector';

const CustomComponent = ({ width, height }) => <div>{`${width}x${height}`}</div>;

export default withResizeDetector(CustomComponent);

5. Render prop pattern

<ResizeDetector
  handleWidth
  handleHeight
  render={({ width, height }) => (
    <div>
      Width:{width}, Height:{height}
    </div>
  )}
/>

API

Prop	Type	Description	Default
onResize	Func	Function that will be invoked with width and height arguments	n/a
handleWidth	Bool	Trigger onResize on width change	false
handleHeight	Bool	Trigger onResize on height change	false
nodeType	node	Set resize-detector's node type. You can pass any valid React node: string with node's name or element. Can be useful when you need to handle table's or paragraph's resizes	div
skipOnMount	Bool	Do not trigger onResize when a component mounts	false
resizableElementId	String	Id of the element we want to observe. If none provided, parentElement of the component will be used	undefined
refreshMode	String	Possible values: throttle and debounce See lodash docs for more information. undefined - means that callback will be fired as often as ResizeObserver allows	undefined
refreshRate	Number	Only makes sense when refreshMode is set. Important! It's a numeric prop so set it accordingly, e.g. refreshRate={500}	1000
refreshOptions	Object	Only makes sense when refreshMode is set. An object in shape of { leading: bool, trailing: bool }. Please refer to lodash's docs for more info	undefined

License

MIT